<!-- 新增班次弹出框 -->
<template>
  <a-modal
    width="50%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
  >
    <template #title>
      <div>新增班次</div>
    </template>
    <article>
      <a-radio-group v-model="flag">
        <template v-for="item in data" :key="item.value">
          <a-radio :value="item.value">
            <template #radio="{ checked }">
              <a-space
                align="start"
                class="custom-radio-card"
                :class="{ 'custom-radio-card-checked': checked }"
              >
                <div>
                  <div className="custom-radio-card-title">
                    {{ item.name }}
                  </div>
                </div>
              </a-space>
            </template>
          </a-radio>
        </template>
      </a-radio-group>
    </article>
  </a-modal>
</template>

<script lang="ts" setup>
const router = useRouter();
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible']);

const data = [
  {
    name: '普通班次设置',
    value: 1
  },
  {
    name: '复杂班次设置',
    value: 2
  }
];

let flag = ref(1); // 判断用户选择哪一个设置

// 保存
const handleOk = async () => {
  router.push({
    name: 'AttendanceManagementClassSettingAdd',
    query: {
      flag: flag.value
    }
  });
  emit('update:visible', false);
};

// 取消
const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="less">
article {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 223px;
  .custom-radio-card {
    padding: 10px 16px;
    border: 1px solid var(--color-border-2);
    border-radius: 4px;
    width: 223px;
    height: 110px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .custom-radio-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-radio-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
  }

  .custom-radio-card-title {
    color: var(--color-text-1);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .custom-radio-card:hover,
  .custom-radio-card-checked,
  .custom-radio-card:hover .custom-radio-card-mask,
  .custom-radio-card-checked .custom-radio-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-radio-card:hover .custom-radio-card-title,
  .custom-radio-card-checked .custom-radio-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked .custom-radio-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
}
</style>
